<template>
    <div class="app-container">
        <!-- 上部的form表单 -->
        <div class="top-form" style="text-align: center;">
                <el-form :inline="true" :model="queryParam" class="demo-form-inline">
                <el-form-item label="姓名 ">
                    <el-input v-model="queryParam.username" placeholder="请输入姓名"
                    :clearable="true"></el-input>
                </el-form-item>
                <el-form-item label="账号状态">
                    <el-select v-model="queryParam.status" placeholder="账号状态" :clearable="true">
                    <el-option label="启用" :value="0"></el-option>
                    <el-option label="禁用" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" round @click="search" icon="el-icon-search">查询</el-button>
                </el-form-item>
                <el-form-item style="margin-left: 30px;">
                    <router-link :to="{path: '/user/teacher/edit' , query:{id: 0 ,msg:'add'}}" class="link-left">
                        <el-button type="primary" round  icon="el-icon-plus">新增</el-button>
                    </router-link>
                </el-form-item>
            </el-form>
        </div>
        <!-- 表格展示数据 -->
        <div class="main">
            <el-table
                ref="multipleTable"
                @selection-change="handleSelectionChange"
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    align="center"
                    label="序号"
                    type="index"
                    width="50">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="account"
                    label="账号"
                    width="120">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="imagePath"
                    label="头像"
                    width="120">
                    <template slot-scope="scope">
                        <el-avatar :size="50" :src="scope.row.imagePath" @error="errorHandler">
                            <img :src="require('@/assets/images/1.jpg')" alt="">
                        </el-avatar>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="username"
                    label="姓名"
                    width="100">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="sex"
                    label="性别"
                    width="60" :formatter="sexFormatter">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="userEmail"
                    label="邮箱"
                    width="180">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="birthDay"
                    label="生日"
                    width="100">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="userStatus"
                    label="状态"
                    width="80">
                <template slot-scope="{row}">
                    <el-tag :type="row.userStatus == '0' ? 'success' : 'danger'" disable-transitions>
                        {{ statusFormatter(row.userStatus) }}
                    </el-tag>
                </template>
                </el-table-column>
                <el-table-column
                    prop="userStatus"
                    align="center"
                    label="操作"
                    fixed="right"
                    width="280px"
                >
                <template slot-scope="scope">
                    <router-link :to="{path: '/user/teacher/edit' , query:{id: scope.row.id,msg:'view'}}" class="link-left">
                        <el-button class="el-btn" size="mini">查看</el-button>
                    </router-link>
                    <router-link :to="{path: '/user/teacher/edit' , query:{id: scope.row.id,msg:'edit'}}" class="link-left">
                        <el-button type="primary" size="mini">编辑</el-button>
                    </router-link>
                    <el-button type="danger" size="mini" @click="handleDel(scope.row)">删除</el-button>
                    <el-button  :type="scope.row.userStatus == '0' ? 'info' : 'success'" disable-transitions 
                        size="mini" @click="handleStatus(scope.row)">
                        {{ scope.row.userStatus == 0 ? '禁用' : '启用'}}
                    </el-button>
                </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination
                style="textAlign:center;margin-top: 20px;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryParam.pageIndex"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="queryParam.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        
    </div>
</template>

<script>
import { mapGetters,mapState } from 'vuex';
// 引入用户管理相关的API
import {pageList,deleteUser,updateStatus} from '@/api/user/student'
export default {
    name : 'teacher',
    data(){
        return {
        queryParam: {
            username: '',
            status: null,
            role: 1,
            pageIndex: 1,
            pageSize: 10
            },
            listLoading: true,
            tableData:[],
            total: 0,
            multipleSelection: [],
        }
    },
    // 当挂载时加载search
    mounted(){
        this.search();
    },
    methods:{
        errorHandler() {
            return true
        },
        // 查询
        async search(){
            let res = await pageList(this.queryParam);
            this.tableData = res.data.records;
            this.queryParam.pageIndex = res.data.current;
            this.queryParam.pageSize = res.data.size;
            this.total = res.data.total;
        },
        // 批量操作
        handleSelectionChange(val){
            val.forEach(item => {
                this.multipleSelection.push(item.id);
            });
        }, 
        handleStatus(row){
            let arr = [];
            if(row.id){
                arr.push(row.id);
                this.updateStatus(arr);
            }else{
                this.updateStatus(this.multipleSelection);
                this.multipleSelection = [];
            }
        },
        updateStatus(val){
            updateStatus(val).then(resp=>{
                if(resp.code == 200){
                    this.$message({
                        type: 'success',
                        message: resp.message
                    });
                }else{
                    this.$message({
                        type: 'error',
                        message: resp.message
                    });
                }
                this.search();
            })
        },
        // 删除
        handleDel(row){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                deleteUser(row.id).then(resp=>{
                    if(resp.code == 200){
                        this.$message({
                            type: 'success',
                            message: resp.message
                        });
                    }else{
                        this.$message({
                            type: 'error',
                            message: resp.message
                        });
                    }
                    this.search()
                })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        // 分页相关
        handleSizeChange(val) {
            this.queryParam.pageSize = val;
            this.search();
        },
        handleCurrentChange(val) {
            this.queryParam.pageIndex = val;
            this.search();
        },

        // 性别的处理
        sexFormatter(row,col,cellValue,index){
            return this.enumFormat(this.sexEnum,cellValue);
        },
        // 状态的处理
        statusFormatter(cellValue){
            return this.enumFormat(this.statusEnum,cellValue);
        },
    },
    computed:{
        ...mapGetters('enumItem',['enumFormat']),
        ...mapState('enumItem',{
            sexEnum: state => state.user.sexEnum,
            statusEnum: state => state.user.statusEnum,
            roleEnum: state => state.user.roleEnum
        })
    }
}
</script>

<style scoped>
    .top-form{
        margin-left: 30px;
        margin-top: 20px;
    }
    .link-left{
        margin-right: 10px;
    }


</style>